<div id="MaxCarousel" class="carousel slide main-carousel" data-ride="carousel">
    <ol class="carousel-indicators">
        <% if(CarouselList!=null){%>
        <% for(var i=0;i<Math.min(CarouselList.length,6);i++){%>
        <li data-target="#MaxCarousel" data-slide-to="<%=i+''%>" class="<%if(i==0){%>active<%}%>"></li>
        <%}}%>
    </ol>
    <div class="carousel-inner">
        <% if(CarouselList!=null){%>
        <% for(var i=0;i<Math.min(CarouselList.length,6);i++){
            var item=CarouselList[i]%>
        <div class="carousel-item <%if(i==0){%>active<%}%>">
           <a href="./~/content/<%=item.category%>/<%=item.id%>/"> <img class="d-block w-100 h-300"  src="./~/Service/Images/<%=item.icon%>/600^/j.png" data-holder-rendered="true">
           </a>
            <div class="carousel-caption d-none d-md-block">
                <p><a href="./~/content/<%=item.category%>/<%=item.id%>/"><%=item.title%></a></p>
            </div>
        </div>
        <%}}%>
    </div>
    <a class="carousel-control-prev" href="#MaxCarousel" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#MaxCarousel" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>